<template>
    <div>
        <el-dialog title="客户信息" v-model="showDialog" :width="dialogWidth" :append-to-body="true"
        :close-on-click-modal="false">
        <el-form label-width="120px" class="baseForm" :rules="rules" :model="form" ref="baseForm">
            <el-form-item label="客户类型" class="item" prop="type">
                <el-select v-model="form.type" placeholder="请选择">
                    <el-option v-for="item in types" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="销售人员" class="item" prop="salerId">
                <el-select v-model="form.salerId" placeholder="请选择">
                    <el-option v-for="item in sales" :key="item.id" :label="item.name" :value="item.id"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="客户名称" class="item" prop="name">
                <el-input v-model="form.name" class="form-input"></el-input>
            </el-form-item>

            <el-form-item label="联系人" class="item" prop="linker">
                <el-input v-model="form.linker" class="form-input"></el-input>
            </el-form-item>
            <el-form-item label="联系电话" class="item" prop="phone">
                <el-input v-model="form.phone" class="form-input"></el-input>
            </el-form-item>
            <el-form-item label="地址" class="item" prop="address">
                <el-input v-model="form.address" class="form-input"></el-input>
            </el-form-item>
            <el-form-item label="创建时间" class="item" v-if="form.createTime">
                {{ form.createTime.replace('T',' ').slice(0,19) }}
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="showDialog = false">取 消</el-button>
                <el-button type="primary" @click="saveEdit" :disabled="!allowsave">确 定</el-button>
            </span>
        </template>
    </el-dialog>
    </div>
</template>
<script>

const rules = (obj => ((o)=>(['type','salerId'].forEach(k=>o[k][0].trigger='change'),o))(Object.keys(obj).reduce((a, b) => (a[b] = [{ required: true, message: obj[b], trigger: 'blur' }],a), {})))({ type: '请选择客户类型', salerId: '请选择销售人员', name: '请输入客户名称', linker: '请输入联系人', phone: '请输入联系电话', address: '请输入联系地址' });
export default {
    data() {
        return {
            showDialog: false,
            form: {
                id: 0,
                type: '',
                name: '',
                salerId: '',
                salerName: '',
                phone: '',
                address: '',
                linker: '',
                createTime: ''
            },
            types: [],
            sales: [],
            dialogWidth: window.innerWidth > 768 ? '768px' : '100%',
            rules,
            allowsave:true
        }
    },
    methods: {
        showadd(row) {
            if(row){
                this.form=row;
            }else{
                var keys = Object.keys(this.form);
                keys.forEach(it => {
                    this.form[it] =  '';
                });
            }

            this.showDialog = true;
            setTimeout(() => {
                this.$refs.baseForm.validate(() => { });
            }, 10);
        },
        saveEdit() {
            this.$refs.baseForm.validate((valid) => {
                if (!valid) return;
                this.allowsave=false;
                // 更新销售姓名
                this.form.salerName=this.sales.find(z=>z.id==this.form.salerId)?.name;
                delete this.form.createTime;
                if(!this.form.id) delete this.form.id;
                this.$api.customer[this.form.id?'update':'add'](this.form).then(({state,msg})=>{
                    if(state){
                        this.$message.success(msg);
                        this.$emit('search');
                        this.showDialog=false;
                    }else{
                        this.$message.warn(msg);
                    }
                }).finally(()=>{
                    this.allowsave=true;
                });
            });
        }
    },
    mounted(){
        this.$api.dictionary.enums(1).then(({msg})=>{
            this.types=msg;
        });
        this.$api.user.names().then(({msg})=>{
            this.sales=msg;
        })
    }
}
</script>